<template>
    <div class="LayerCtrl">
        <div v-for="group in layerList2" :key="group.groupName" class="group">
            <div class="group-name">
                <el-checkbox v-model="group.isShowAll" @change="isShowGroup(group)" />
                <span class="m-l-10">{{ group.groupName }}</span>
            </div>
            <div class="group-body">
                <div v-for="layer in group.children" :key="layer.id" class="row">
                    <el-checkbox v-model="layer.show" @change="(checked) => isShowLayer(layer.id, checked)" />
                    <img v-if="layer.icon" class="m-l-10" :class="layer.clasName" :src="layer.icon" alt="">
                    <span class="name m-l-10">{{ layer.name }}</span>
                </div>
            </div>

        </div>
    </div>
</template>

<script>
import { initLoad, callUIInteraction, addResponseEventListener } from '@/PixelStreaming/webrtcVideo.js'
import MB from './mixins/layer/MB'
import WATA from './mixins/layer/WATA'
import WATAM from './mixins/layer/WATAM'
import RIVL from './mixins/layer/RIVL'
import FZC from './mixins/layer/FZC'
import AZD from './mixins/layer/AZD'
import ZYLX from './mixins/layer/ZYLX'
import WXQ from './mixins/layer/WXQ'
import LH from './mixins/layer/LH'
import QSYDW from './mixins/layer/QSYDW'
import QL from './mixins/layer/QL'
import QLYHDC from './mixins/layer/QLYHDC'
import RHDC from './mixins/layer/RHDC'
import TYB from './mixins/layer/TYB'
import JYYLZ from './mixins/layer/JYYLZ'
import LSHH from './mixins/layer/LSHH'
import LSSHZH from './mixins/layer/LSSHZH'
import WXYJGBZ from './mixins/layer/WXYJGBZ'
import YHCL from './mixins/layer/YHCL'
import ZDJCZ from './mixins/layer/ZDJCZ'
import XFHZLSHG from './mixins/layer/XFHZLSHG'
import MZGTZD from './mixins/layer/MZGTZD'

import DOM from './mixins/layer/DOM'
import TERR from './mixins/layer/TERR'
import B3DM from './mixins/layer/B3DM'
import DMX from './mixins/layer/DMX'

export default {
    name: 'BasinChange',
    mixins: [
        TERR,
        DOM,
        B3DM,
        MB,
        WATA,
        WATAM,
        RIVL,
        FZC,
        AZD,
        ZYLX,
        WXQ,
        LH,
        QSYDW,
        QL,
        QLYHDC,
        RHDC,
        TYB,
        JYYLZ,
        LSHH,
        LSSHZH,
        WXYJGBZ,
        YHCL,
        ZDJCZ,
        XFHZLSHG,
        MZGTZD,
        DMX
    ],
    data() {
        return {
            layerList2: [
                {
                    groupName: '基础图层',
                    isShowAll: false,
                    children: {
                        TERR: {
                            id: 'TERR',
                            name: '开启地形',
                            show: true
                        },
                        B3DM: {
                            id: 'B3DM',
                            name: '倾斜摄影',
                            show: false
                        },
                        // DOMOL: {
                        //     id: 'DOMOL',
                        //     name: '正摄影像',
                        //     show: true
                        // }
                    }
                },
                {
                    groupName: '专题图层',
                    isShowAll: false,
                    children: {
                        MB: {
                            id: 'MB',
                            name: '外围遮罩',
                            icon: require('@/assets/map/layerIconNew/MB.png'),
                            show: false
                        },
                        WATAM: {
                            id: 'WATAM',
                            name: '流域边界',
                            icon: require('@/assets/map/layerIconNew/WATAM.png'),
                            show: true,
                            clasName: "imgs"
                        },
                        WATA: {
                            id: 'WATA',
                            name: '小流域',
                            icon: require('@/assets/map/layerIconNew/WATA.png'),
                            show: false,
                            clasName: "imgs"
                        },
                        DMX: {
                            id: 'DMX',
                            name: '断面',
                            icon: require('@/assets/map/layerIconNew/LSHH.png'),
                            show: false,
                            clasName: "imgs"
                        },
                        FZC: {
                            id: 'FZC',
                            name: '防治村',
                            // icon: require('@/assets/map/layerIconNew/FZC.png'),
                            icon: require('@/assets/map/layerIconNew/fangzhicun.png'),
                            show: true
                        },
                        AZD: {
                            id: 'AZD',
                            name: '安置点',
                            icon: require('@/assets/map/layerIconNew/AZD.png'),
                            show: false
                        },
                        ZYLX: {
                            id: 'ZYLX',
                            name: '转移路线',
                            icon: require('@/assets/map/layerIconNew/ZYLX.png'),
                            show: !1,
                            clasName: "imgss"
                        },
                        WXQ: {
                            id: 'WXQ',
                            name: '危险区',
                            icon: require('@/assets/map/layerIconNew/WXQ.png'),
                            show: false
                        },
                        LH: {
                            id: 'LH',
                            name: '路涵',
                            icon: require('@/assets/map/layerIconNew/LH.png'),
                            show: !1
                        },
                        QSYDW: {
                            id: 'QSYDW',
                            name: '企事业单位',
                            icon: require('@/assets/map/layerIconNew/QSYDW.png'),
                            show: !1
                        },
                        QL: {
                            id: 'QL',
                            name: '桥梁',
                            icon: require('@/assets/map/layerIconNew/QL.png'),
                            show: !1
                        },
                        QLYHDC: {
                            id: 'QLYHDC',
                            name: '桥涵(隐患调查)',
                            icon: require('@/assets/map/layerIconNew/QLYHDC.png'),
                            show: !1
                        },
                        RHDC: {
                            id: 'RHDC',
                            name: '入户调查',
                            icon: require('@/assets/map/layerIconNew/RHDC.png'),
                            show: !1
                        },
                        TYB: {
                            id: 'TYB',
                            name: '塘堰坝',
                            icon: require('@/assets/map/layerIconNew/TYB.png'),
                            show: !1
                        },
                        JYYLZ: {
                            id: 'JYYLZ',
                            name: '简易雨量站',
                            icon: require('@/assets/map/layerIconNew/JYYLZ.png'),
                            show: !1
                        },
                        LSHH: {
                            id: 'LSHH',
                            name: '历史洪痕',
                            icon: require('@/assets/map/layerIconNew/LSHH.png'),
                            show: !1
                        },
                        LSSHZH: {
                            id: 'LSSHZH',
                            name: '历史山洪灾害',
                            icon: require('@/assets/map/layerIconNew/LSSHZH.png'),
                            show: !1
                        },
                        WXYJGBZ: {
                            id: 'WXYJGBZ',
                            name: '无线广播站',
                            icon: require('@/assets/map/layerIconNew/WXYJGBZ.png'),
                            show: !1
                        },
                        YHCL: {
                            id: 'YHCL',
                            name: '村落信息',
                            icon: require('@/assets/map/layerIconNew/YHCL.png'),
                            show: !1
                        },
                        ZDJCZ: {
                            id: 'ZDJCZ',
                            name: '自动监测站',
                            icon: require('@/assets/map/layerIconNew/ZDJCZ.png'),
                            show: !1
                        },
                        XFHZLSHG: {
                            id: 'XFHZLSHG',
                            name: '需防治山洪沟',
                            icon: require('@/assets/map/layerIconNew/XFHZLSHG.png'),
                            show: !1,
                            clasName: "imgs"
                        },
                        MZGTZD: {
                            id: 'MZGTZD',
                            name: '面状沟滩占地',
                            icon: require('@/assets/map/layerIconNew/WXQ.png'),
                            show: !1
                        }
                    }
                }
            ]
        }
    },
    computed: {
        SceneMode() {
            return this.$store.getters.SceneMode
        },
        pageState() {
            return this.$store.getters.pageState
        }
    },
    watch: {
        $route: {
            immediate: true,
            handler: function (val, oldVal) {
                if (val.path === '/reserveplan/visualization') {
                    this.$nextTick(() => {
                        this.$eventBus.$emit('openLayer', 'AZD')
                        this.$eventBus.$emit('openLayer', 'ZYLX')
                        this.$eventBus.$emit('openLayer', 'WXQ')
                        this.$eventBus.$emit('openLayer', 'RHDC')
                    })
                } if (this.$route.path === '/reserveplan/previewPlan') {

                } else {
                    this.$eventBus.$emit('closeLayer', 'AZD')
                    this.$eventBus.$emit('closeLayer', 'ZYLX')
                    this.$eventBus.$emit('closeLayer', 'WXQ')
                    this.$eventBus.$emit('closeLayer', 'RHDC')
                }
            }
        },
        pageState: {
            immediate: true,
            deep: true,
            handler: function (val, oldVal) {
                if (this.$route.path === '/reserveplan/previewPlan') {
                    if (!val.yuAn_YYYA_Load && val.yuAn_YYYA_Right_Type === 1) {
                        this.$nextTick(() => {
                            this.$eventBus.$emit('openLayer', 'AZD')
                            this.$eventBus.$emit('openLayer', 'ZYLX')
                            this.$eventBus.$emit('openLayer', 'WXQ')
                        })
                    } else {
                        this.$eventBus.$emit('closeLayer', 'AZD')
                        this.$eventBus.$emit('closeLayer', 'ZYLX')
                        this.$eventBus.$emit('closeLayer', 'WXQ')
                    }
                }
            }
        }
    },
    created() {
        // 专题图层通用事件管理器
        this.screenSpaceEventHandler = null

        this.$eventBus.$on('openLayer', (name) => {
            this.layerList2.forEach(group => {
                for (const id in group.children) {
                    if (id === name) {
                        if (!group.children[name].show) {
                            group.children[name].show = true
                            this.isShowLayer(name, true)
                        }
                    }
                }
            })
        })
        this.$eventBus.$on('closeLayer', (name) => {
            this.layerList2.forEach(group => {
                for (const id in group.children) {
                    if (id === name) {
                        if (group.children[name].show) {
                            group.children[name].show = false
                            this.isShowLayer(name, false)
                        }
                    }
                }
            })
        })
    },
    mounted() {

    },
    methods: {
        initEvent() {
            if (this.screenSpaceEventHandler) {
                this.screenSpaceEventHandler.destroy()
                this.screenSpaceEventHandler = null
            }
            this.screenSpaceEventHandler = new Cesium.ScreenSpaceEventHandler(
                this.$viewer.scene.canvas
            )
            this.screenSpaceEventHandler.setInputAction((event) => {
                const pickedObject = this.$viewer.scene.pick(event.endPosition)
                if (
                    pickedObject &&
                    pickedObject.id &&
                    pickedObject.id.eventName/*  &&
                        pickedObject.id.eventName === '通用' */
                ) {
                    if (pickedObject.id.eventName === '通用' && event.endPosition.x) {
                        this.$viewer._container.style.cursor = 'pointer'
                        const popParams = this.$store.getters.popParams
                        popParams.name = '通用'
                        popParams.show = true
                        popParams.posX = Math.round(event.endPosition.x)
                        popParams.posY = Math.round(event.endPosition.y)
                        // popParams.remarks = pickedObject.id.prop
                        try {
                            var funName = `getRemarks${pickedObject.id.lid}`
                            if (
                                Object.hasOwnProperty.call(this, funName) &&
                                this[funName] instanceof Function
                            ) {
                                popParams.remarks = this[funName].call(
                                    this,
                                    pickedObject.id.prop
                                )
                                this.$store.dispatch('popParams', popParams)
                            }
                        } catch (e) {
                            console.log(e)
                        }
                    }
                } else {
                    this.$viewer._container.style.cursor = 'default'
                    this.$store.dispatch('closePop')
                }
            }, Cesium.ScreenSpaceEventType.MOUSE_MOVE)
        },

        isShowGroup(group) {
            for (const id in group.children) {
                if (group.isShowAll) {
                    if (!group.children[id].show) {
                        group.children[id].show = true
                        this.isShowLayer(id, true)
                    }
                } else {
                    this.isShowLayer(id, false)
                    group.children[id].show = false
                }
            }
        },
        isShowLayer(id, checked) {
            try {
                var param = {
                    "layerName": id,    // 名称
                    "bShow": checked  // 是否显示
                }
                callUIInteraction("Web_ShowLayer", param);
                if (checked) {
                    var creat = `this.creat${id}()`
                    eval(creat)
                } else {
                    var clear = `this.clear${id}()`
                    eval(clear)
                }
            } catch (e) {
                console.log(e)
            }
        }
    }
}
</script>
<style lang="less"></style>
<style lang="less" scoped>
.LayerCtrl {
    position: relative;
    top: 0px;
    left: 0px;
    display: flex;
    flex-direction: column;
    padding: 5px;
    max-height: 90VH;
    overflow: auto;

    .group {
        .group-name {
            // color: #CCCCCC;
            color: #fff;
            font-size: 16px;
            font-weight: bold;
            padding: 5px;
            height: 36px;
            background: linear-gradient(90deg, rgba(0, 240, 255, 0.2) 0%, rgba(0, 240, 255, 0) 100%);

            .el-checkbox {
                width: 14px;
                height: 14px;
            }
        }

        .group-body {
            // border: 1px solid #5d8bc4;
            border-radius: 10px;
            padding: 5px;

            .row {
                display: flex;
                align-items: center;
                padding: 5px 0;

                /deep/.el-checkbox__input {
                    &.is-checked {
                        .el-checkbox__inner {
                            background: #00C6FF; // #7FADFD;

                            &::after {
                                border-color: #fff; // #0A0C07;
                            }
                        }
                    }
                }

                img {
                    width: 20px;
                    height: 20px;
                }

                .imgs {
                    width: 21px;
                    height: 2px;
                }

                .imgss {
                    width: 21px;
                    height: 12px;
                }

                .name {
                    font-size: 12px;
                }
            }
        }
    }

}
</style>
